<!-- 商品详情里的立即购买，选择规格，加入购物车 -->
<template>
	<view class="cu-modal bottom-modal" :class="{'show':isShow}" >
	  <view class="cu-dialog">
			<view class="goods-data">
				<view class="thumb">
					<image :src="ip+img" mode=""></image>
					<image src="/static/img/close.png" mode=""  style="position: absolute; width: 50rpx; height: 50rpx; margin-left: 630rpx;margin-top: 30rpx" @click="hide"></image>
				</view>
				<view class="item">
					<view class="title">
						<text></text>
					</view>
					<view class="price">
						<text class="min">￥</text>
						<text class="max">{{activityPrice}}</text>
						<text class="min">.00</text>
					</view>
					<view class="inventory">
						<text>库存：{{num}}</text>
					</view>
				</view>
			</view>
			<view class="attr-size">
				<view class="attr-list" v-for="(item,index) in AttrSizeList" :key="index">
					<view class="title">
						<text>{{item.attr}}</text>
					</view>
					<view class="size-list">
						<div class="list" v-for="(value,idx) in item.SizeList" 
						:class="{'action':AttrSizeList[index].index === idx}"
						@click.stop="onAttrSize(item,value,index,idx)" :key="idx">
							<text>{{value.size}}</text>
						</div>
					</view>
				</view>
				<!-- <view class="attr-number" @click.stop="onStop">
					<view class="tit">数量</view> -->
				<!-- 	<view class="number">
						<text class="iconfont icon-jian" @click="onJian(item,index)"></text>
						<input type="tel" value="1" maxlength="8">
						<text class="iconfont icon-jia" @click="onJia(item,index)"></text>
					</view> -->
					
				<view class="num">
					<view class="add">
						<text class="iconfont icon-jian" @click="onJian()"></text>
					</view>
					<view class="number">
						<text >{{shu}}</text>
						
					</view>
					<view class="add">
						<text class="iconfont icon-jia" @click="onJia()"></text>
					</view>
				</view>
					<text style="margin-left: -159px;font-size: 24px; font-weight: bold;" >总金额：{{Price}}</text>
					
				<!-- </view> -->
			</view>
			<view class="attr-btn">
				<view class="add-cart" v-if="BuyType === 2 ||BuyType === 1" @click="onConfirm(BuyType)">加入购物车</view>
				<!-- <view class="add-buy" v-if="BuyType === 2 || BuyType === 1" @click="onConfirm(BuyType)">立即购买</view> -->
			<!-- 	<view class="confirm" v-if=" BuyType === 3" @click="onConfirm(BuyType)">确定</view> -->
			</view>
		</view>
	</view>
</template>

<script>
	import {baseUrl} from '@/config/baseUrl.js';
	
	export default {
		data() {
			return {
				isShow: false,
				AttrIndex: 0,
				SizeIndex: 0,
				goodsInfo:"",
				activityPrice:"",
				num:"",
				img:"",
				ip:"http://43.142.173.112:9090/images/",
				goodsName:"",
				shu:1,
				Price:0,
				AttrSizeList:[
					// {
					// 	index: 0,
					// 	attr: '颜色',
					// 	SizeList: [
					// 		{
					// 			index: 0,
					// 			size: '白色'
					// 		},{
					// 			index: 1,
					// 			size: '黑色'
					// 		},{
					// 			index: 2,
					// 			size: '粉丝'
					// 		},{
					// 			index: 3,
					// 			size: '灰色'
					// 		},
					// 	],
					// },{
					// 	index: 0,
					// 	attr: '尺码',
					// 	SizeList: [
					// 		{
					// 			index: 0,
					// 			size: 'M尺码'
					// 		},{
					// 			index: 1,
					// 			size: 'L尺码'
					// 		},{
					// 			index: 2,
					// 			size: 'XL尺码'
					// 		},{
					// 			index: 3,
					// 			size: 'XXL尺码'
					// 		},
					// 	],
					// }
				],
				// 购买类型
				BuyType: 0,
			};
		},
		onLoad() {
		},
		methods:{
			/**
			 * 显示 
			 * @param {Number} type 1 点击选择 2 加入购物 3 立即购买
			 */
			show(type){
				this.activityPrice = uni.getStorageSync("activityPrice");
				this.num = uni.getStorageSync("num");
				this.img = uni.getStorageSync("img");
				this.goodsName = uni.getStorageSync("goodsName");
				this.Price=this.activityPrice;
			
				
				this.BuyType = type;
				this.isShow = true;
			},
			hide(){
				this.isShow = false;
				uni.$emit("shu",this.shu)
			},
			onStop(){
			},
			onJia() {
				if(this.shu<this.num){
					this.shu = this.shu + 1;
					this.Price = this.activityPrice * this.shu;
				}else{
					uni.showToast({
						title: '超出库存上限',
						icon: 'error',
						mask: true,
					});
				}
					uni.$emit("shu",this.shu)
			},
			onJian() {
				// if(){}
				if(this.shu>1){
					this.shu = this.shu - 1;
					this.Price = this.activityPrice * this.shu;
				}else{
					uni.showToast({
						title: '数量不能小于0',
						icon: 'error',
						mask: true,
					});
				}
				uni.$emit("shu",this.shu)
					
			},
			/**
			 * 属性选择点击
			 */
			onAttrSize(item,value,index,idx){
				this.AttrSizeList[index].index = idx;
				this.AttrIndex = item.index;
				this.SizeIndex = value.index;
			},
			/**
			 * 确认点击
			 */
			onConfirm(type){
				
				uni.request({
					url: baseUrl + "/buyCart/AddGoodsList",
					method: 'POST',
					data: {
						userId:uni.getStorageSync("userId"),
						goodsId:uni.getStorageSync("goodsId"),
						shu:this.$data.shu
					},
					header: {
						"Content-Type": "application/x-www-form-urlencoded"
					},
					success: (res) => {
				uni.showToast({
									title: '添加购物车成功',
									icon: 'success',
									mask: true,
								});
								this.isShow = false;
					}
				})
				
				
				
				
			
			}
		}
	}
</script>

<style scoped lang="scss">
	@import 'GoodsAttr.scss';
</style>
